<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<p>
  这么多的
  <ruby>
    人该标签无法显示<rt>ren</rt>
    <rp>该标签无法显示</rp>
  </ruby>
  也有很多
</p>

<p>
  这么多的<ruby>人<rt>ren</rt><rp>该标签无法显示</rp></ruby>也有很多
</p>
<button id="start">start</button>
<button id="stop">stop</button>
<video id="recplayer" autoplay>start record</video>
<script>
  const $recplayer = document.querySelector('#recplayer');
  const $start = document.querySelector('#start');
  const $stop = document.querySelector('#stop');
  const constraints = {
    video: {
      cursor: "never"
    },
    audio: false
  };

  function gotMediaStream(stream) {
    $recplayer.srcObject = stream;
  }

  function startMediaDisplay () {
    navigator.mediaDevices.getDisplayMedia({ video: true })
      .then(gotMediaStream)
      .then(stream => {
        console.log("Awesome");
      }, error => {
        console.log(typeof error);
        console.log(JSON.stringify(error, null, 2));
        console.log(String(error) === 'NotAllowedError: Permission denied');
        console.log("Unable to acquire screen capture", error === 'DOMException: Permission denied');
      });
  }

  function stopMediaDisplay () {
    const tracks = $recplayer.srcObject.getTracks();
    tracks.forEach(track => track.stop());
    $recplayer.srcObject = null;
  }

  $start.onclick = startMediaDisplay
  $stop.onclick = stopMediaDisplay
</script>
</body>
</html>
